import React, {useState, CSSProperties} from 'react';
import {BarsOutlined} from '@ant-design/icons';
import c from 'classname';
import {Transition} from 'react-transition-group';
import logo from '@/assets/images/logo.png';
import './index.less';
const duration:number = 200;
const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
}
interface TransitionStyles {
    entering: CSSProperties,
    entered: CSSProperties,
    exiting: CSSProperties,
    exited: CSSProperties,
}

const transitionStyles: TransitionStyles = {
    entering: {opacity: 1},
    entered: {opacity: 1},
    exiting: {opacity: 0},
    exited: {opacity: 0},
}

interface Props {
    currentCategory: string,
    setCurrentCategory: (currentCategory: string) => any
}

function Header(props:Props) {
    let [isMenuVisible, setIsMenuVisible] = useState(false);

    function setCurrentCategory(event: React.MouseEvent<HTMLUListElement>) {
        let target:HTMLUListElement = event.target as HTMLUListElement;
        const category = target.dataset.category;
        props.setCurrentCategory(category);
        setIsMenuVisible(false);
    }

    return <header className="home-header">
        <div className="logo-header">
            <img src={logo} />
            <BarsOutlined onClick={() => setIsMenuVisible(!isMenuVisible)} />
        </div>
        <Transition in={isMenuVisible} timeout={duration}>
            {
                (state: keyof TransitionStyles) => {
                    return <ul
                        className="category"
                        onClick={setCurrentCategory}
                        style={{
                            ...defaultStyle,
                            ...transitionStyles[state]
                        }}
                    >
                        <li data-category="all" className={c({active: props.currentCategory === 'all'})}>全部课程</li>
                        <li data-category="react" className={c({active: props.currentCategory === 'react'})}>react</li>
                        <li data-category="vue" className={c({active: props.currentCategory === 'vue'})}>Vue</li>
                    </ul>
                }
            }
        </Transition>
    </header>

}

export default Header;